<template>
  <div class="quick-wrapper">
    <div class="fault-title">{{ $t('faultCollection.title') }}</div>
    <div class="quick-img-wrapper">
      <img
        src="@/project/authSys/assets/images/faultCollection/faultCollection.png"
        alt=""
        class="quick-img"
      />
      <div class="fault-tip">
        {{ $t('faultCollection.tip') }}
      </div>
      <div>
        <a-button type="primary" @click="getFaultLog">
          {{ $t('faultCollection.button') }}
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import { maccApi, requestHttpDownload } from '@utils/index';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
import moment from 'moment-timezone';
export default {
  name: 'quickCreate',
  mixins: [authSysMixin],
  data() {
    return {
      isGuideVisible: false,
    };
  },
  mounted() {},
  computed: {},
  methods: {
    async getFaultLog() {
      let api = maccApi.MACC_FAULT_COLLECT_GET_API;
      const today = moment();
      const fileName =
        'faultCollection-' + today.format('YYYYMMDDHHmmss') + '.zip';
      let data = {
        api: api,
        fileName,
        attachment: true, //是否以附件形式下载，默认true
        method: 'GET',
        module: 'default',
        contentType: 'application/zip;charset=UTF-8',
      };

      requestHttpDownload(JSON.stringify(data)).then((ret) => {
        //真正下载
        let url = '/webproxy/common/file/download';
        let downloadData = ret.data.downloadData;
        url += '?downloadData=' + downloadData;
        window.open(url);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.quick-wrapper {
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #e0e9ff 74.5%, #dae4ff 99.5%);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fault-tip {
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  width: 500px;
}
.fault-title {
  //styleName: 16 小标题/bold;
  font-size: 16px;
  font-weight: 600;
  height: 32px;
  line-height: 32px;
  text-align: left;
}
.quick-img-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 100px;
}
.quick-img {
  width: 280px;
}
</style>
